<template>
	<view class="cooperationIndex">
		<swiper class="index-swiper" indicator-dots="true" autoplay="true" interval="3000" circular="true"
			indicator-active-color="#f7f7f7" indicator-color="rgba(145, 145, 145, 0.7)">
			<swiper-item v-for="(item , index) in homeSlide" :key="index">
				<view class="index-swiper-image">
					<image :src="item" mode="aspectFit" lazy-load="true"></image>
				</view>
			</swiper-item>
		</swiper>
		<scroll-view scroll-y="true">
			<view class="order-new-Info-List" v-for="(item,index) in order_new_Array" :key="item.id">
				<view class="order-new-Info-view" hover-class="order-new-Info-view_hover" @click="goto2(item)">
					<view class="order-new-Info-left">
						<!-- 活动图片 -->
						<img :src="item.img"/>
						<!-- <image v-bind:src="item.img"></image> -->
						<!-- <text>{{index + 1}}</text> -->
					</view>
					<view class="order-new-Info-middle">
						<!-- 是否开始状态 -->
						<view class="order-new-Info-line1">
							<view class="order-new-Info-state">
								{{item.state}}
							</view>
						</view>
						<view class="order-new-Info-line2">
							<view class="order-new-Info-Brief">
								<text>{{item.brief}}</text><!-- 问题简述 -->
							</view>
						</view>
						<view class="order-new-Info-line3">
							<view class="order-new-Info-People">
								<!-- 位置图标 -->
								<image src="http://p1362.bvimg.com/10465/2202ce3cd3326abb.png"></image>
								{{item.place}}
							</view>
							<view class="order-new-Info-Place">
								<!-- 人员图标 -->
								<image src="http://p1362.bvimg.com/10465/aec6207b3ee7a169.png"></image>
								{{item.number_signup}}/{{item.number_need}}<!-- 地点 -->
							</view>
						</view>
					</view>
				</view>
				<view class="cross-line"></view>
			</view>
		</scroll-view>
		<!-- 底部导航条 -->
		<view class="footer">
			<!-- 首页 -->
			<button class="footer-buttom" @click="onReturnGoto('../cooperationIndex/cooperationIndex')">
				<image src="http://p1362.bvimg.com/10465/7263b7948d7cac03.png" lazy-load="true" mode=""></image>
				<view class="icon_name">活动首页</view>
			</button>
			<!-- 我的互助 -->
			<button class="footer-buttom" @click="goto('../cooperationMine/cooperationMine')">
				<image src="http://p1362.bvimg.com/10465/f97c52e57b349064.png" lazy-load="true" mode=""></image>
				<view class="icon_name">我的互助</view>
			</button>
			<!-- 我发布的 -->
			<!-- <button class="footer-buttom" @click="goto('../cooperationRelease/cooperationRelease')">
				<image src="http://p1362.bvimg.com/10465/33a81004c9dae999.png" lazy-load="true" mode=""></image>
				<view class="icon_name">我发布的</view>
			</button> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ifLoading: true,
				homeSlide: [
					//购物拼团
					'http://p1362.bvimg.com/10465/402ad834059c2b64.png',
					//垃圾分类互助
					'http://p1362.bvimg.com/10465/95dc43e54bc16b4f.png',
					//秋收互助
					'http://p1362.bvimg.com/10465/362efea4486aa385.png'
				],
				order_new_Array: [{
						id: 0,
						state: "",//活动状态
						startdate: "2021/12/2",//开始日期
						starttime: "10:26",//开始时间
						enddate: "2021/12/10",//结束日期
						endtime: "10:26",//结束时间
						brief: "12月垃圾分类回收志愿活动",
						place:"村北垃圾回收站",
						number_need: 8,//需求人数
						number_signup: 6,//报名人数
						img:"http://p1362.bvimg.com/10465/95dc43e54bc16b4f.png",//活动图片
						iniciator:"马晓峰"//发起者
					},
					{
						id: 1,
						state: "",//活动状态
						startdate: "2021/12/2",//开始日期
						starttime: "10:26",//开始时间
						enddate: "2021/12/10",//结束日期
						endtime: "10:26",//结束时间
						brief: "12月垃圾分类回收志愿活动",
						place:"村北垃圾回收站",
						number_need: 8,//需求人数
						number_signup: 6,//报名人数
						img:"http://p1362.bvimg.com/10465/95dc43e54bc16b4f.png",//活动图片
						iniciator:"马晓峰"//发起者
					},
					{
						id: 2,
						state: "",//活动状态
						startdate: "2021/12/2",//开始日期
						starttime: "10:26",//开始时间
						enddate: "2021/12/10",//结束日期
						endtime: "10:26",//结束时间
						brief: "12月垃圾分类回收志愿活动",
						place:"村北垃圾回收站",
						number_need: 8,//需求人数
						number_signup: 6,//报名人数
						img:"http://p1362.bvimg.com/10465/95dc43e54bc16b4f.png",//活动图片
						iniciator:"马晓峰"//发起者
					},
					{
						id: 3,
						state: "",//活动状态
						startdate: "2021/12/2",//开始日期
						starttime: "10:26",//开始时间
						enddate: "2021/12/10",//结束日期
						endtime: "10:26",//结束时间
						brief: "12月垃圾分类回收志愿活动",
						place:"村北垃圾回收站",
						number_need: 8,//需求人数
						number_signup: 6,//报名人数
						img:"http://p1362.bvimg.com/10465/95dc43e54bc16b4f.png",//活动图片
						iniciator:"马晓峰"//发起者
					},
					{
						id: 4,
						state: "",//活动状态
						startdate: "2021/12/2",//开始日期
						starttime: "10:26",//开始时间
						enddate: "2021/12/10",//结束日期
						endtime: "10:26",//结束时间
						brief: "12月垃圾分类回收志愿活动",
						place:"村北垃圾回收站",
						number_need: 8,//需求人数
						number_signup: 6,//报名人数
						img:"http://p1362.bvimg.com/10465/95dc43e54bc16b4f.png",//活动图片
						iniciator:"马晓峰"//发起者
					}
				]
			}
		},
		methods:{
			goto(url) {
				uni.navigateTo({
					url: url
				})
			},
			goto2(e) {
				uni.navigateTo({
					url: 'cooperationDetail?activity='+encodeURIComponent(JSON.stringify(e))
				})
			},
			onReturnGoto(url){
				uni.redirectTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	page {
		background-image: url('http://p1362.bvimg.com/10465/0b3b7c99caa3a89e.png');
		background-attachment: fixed;
	}

	.cooperationIndex {
		/* display: flex; */
		align-items: center;
	}

	.index-swiper {
		height: 360rpx;
		width: 100%;
		margin: 24rpx 0 16rpx 0;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.index-swiper-image image {
		height: 360rpx;
		width: 100%;
	}

	/* 底部导航条 */
	.footer {
		/* background-color: #FEEFD1; */
		color: #fff;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		margin: 0 auto;
	}

	.footer-buttom {
		width: 260rpx;
		margin: 0 30rpx;
		background-color: #FEC06A;
		border: 0;
		border-radius:20rpx;
		margin-bottom: 10rpx;
		display: flex;
	}

	.footer-buttom image {
		width: 60rpx;
		height: 50rpx;
		margin-top: 15rpx;
	}

	.icon_name {
		color: #FFFFFF;
		font-size: medium;
		font-weight: bold;
		margin-bottom: -1rpx;
		margin-left: 10rpx;
	}
	
	.order-new-Info-List{
		align-items: center;
	}
	
	.order-new-Info-view {
		width: 96%;
		height: 25vw;
		display: flex;
		margin-top: 3vw;
		background-color: #fefaf3;
		margin-left: 2%;
	
	}
	
	.order-new-Info-view_hover {
		background-color: #FEF0D2;
	}
	
	.repair-content-box {
		height: 100vw;
		background-size: 100% 100%;
		margin-left: 3vw;
		margin-right: 3vw;
		margin-top: 3vw;
	
	}
	
	.repair-new-title-box {
		margin-top: 5vw;
		margin-left: 5vw;
		margin-right: 5vw;
	}
	
	.cross-line {
		height: 0.5vw;
		width: 96%;
		background-color: #f0d6ab;
		margin-left: 2%;
	}
	
	// 工单图标
	.order-new-Info-left {
		width: 40%;
		align-items: center;
	}
	
	.order-new-Info-left img {
		height: 92%;
		width: 92%;
		padding-top: 4%;
		padding-left: 4%;
	}
	
	.order-new-Info-middle {
		width: 100%;
	}
	
	.order-new-Info-line1 {
		display: flex;
		height: 5.5vw;
		width: 100%;
	}
	
	
	.order-new-Info-state {
		width: 98%;
		font-size: medium;
		font-weight: bold;
		color: #FEBD62;
		text-align: right;
	}
	
	.order-new-Info-line2{
		height: 8vw;
		font-size: larger;
		font-weight: bold;
		color: #575757;
		align-items: center;
	}
	
	.order-new-Info-line3 {
		display: flex;
		height: 5.5vw;
		width: 100%;
		margin-top: 35rpx;
	}
	
	.order-new-Info-People {
		width: 50%;
		color: #808080;
		font-size: small;
		display: flex;
	}
	.order-new-Info-People image{
		width:40rpx;
		height:40rpx;
	}
	.order-new-Info-Place {
		width: 50%;
		color: #808080;
		font-size: small;
		display: flex;
	}
	.order-new-Info-Place image{
		width:40rpx;
		height:40rpx;
		margin-left: 30rpx;
	}
</style>
